<template>
	<view>
		<view class="form-box">
			<view class="cell_item" v-if="couponItem.len > 0" @click="couponItem.show = true">
				<view>优惠券</view>
				<view class="cell_center"></view>
				<view class="price_box">
					<template v-if="couponItem.price > 0">
					<text class="price_sign">￥</text>
					<text class="price_num">{{couponItem.price}}</text>
					</template>
					<text class="price_num small" v-else>{{couponItem.len}}张可用</text>
				</view>
				<view class="iconfont iconfont-e775"></view>
			</view>
			<view class="cell_item" v-if="!checkPick && prodPostage > 0 && navCurrent != 1">
				<view>运费</view>
				<view class="post_box">
					<text class="sign">￥</text>
					<text class="post_money">{{prodPostage || 12}}</text>
				</view>
			</view>
			<view class="cell_item" v-if="service_charge > 0">
				<view>服务费</view>
				<view class="post_box">
					<text class="sign">￥</text>
					<text class="post_money">{{service_charge}}</text>
				</view>
			</view>
			<u-form-item label="备注" :border-bottom="false">
				<u-input class="remark_input" v-model="remark" type="text" maxlength="120" input-align="right"
					height="40" placeholder='请控制在120字以内' />
			</u-form-item>
		</view>
		<!-- 优惠券选择弹窗 -->
		<sww-coupon v-if="hasCoupon" v-model="couponItem" class_id="1" :productIds="productIds" :prodPrice="prodPrice"
			:fk_supplier_id="fk_supplier_id"></sww-coupon>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			checkPick: {
				type: Boolean,
				default: false
			},
			prodPostage: {
				type: Number,
				default: 0
			},
			navCurrent: {
				type: Number,
				default: 0
			},
			hasCoupon: {
				type: Boolean,
				default: false
			}, // 是否有优惠券功能
			productIds: {
				type: String,
				default: ''
			},
			prodPrice: {
				type: Number,
				default: 0
			},
			service_charge: {
				type: Number,
				default: 0
			}, // 服务费
			fk_supplier_id: {
				type: Number,
				default:0
			}, // 店铺id（普通产品）
		},
		watch: {
			'couponItem.price': {
				handler(val) {
					this.$emit('input', val || 0)
				},
				immediate: true
			}
		},
		components: {},
		data() {
			return {
				remark: '',
				couponItem: {
					price: 0,
					name: '无可用',
					show: false
				},
			};
		},

		mounted() {},

		methods: {}
	};
</script>

<style scoped lang="scss">
	.form-box {
		width: 100%;

		::v-deep .u-cell {
			padding: 20rpx 0;
		}

		.form-input {
			width: 100%;
			display: flex;

			textarea {
				width: 100%;
				line-height: 40rpx;
				font-size: 28rpx;
			}
		}
	}

	.cell_item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		height: 60rpx;
		box-sizing: content-box;

		.cell_center {
			flex: 1;
			overflow: hidden;
			color: #999;
			padding-left: 30rpx;
		}

		.price_box {
			color: var(--price);

			.price_sign {
				font-size: 28rpx;
			}

			.price_num {
				font-size: 32rpx;
				&.small{
					font-size: 28rpx;
				}
			}
		}

		.post_box {
			flex: 1;
			overflow: hidden;
			color: #333;
			text-align: right;
			color: var(--price);

			.sign {
				font-size: 28rpx;
			}

			.post_money {
				font-size: 32rpx;
			}
		}

		.iconfont {
			color: #666;
			margin-left: 8rpx;
			position: relative;
		}
	}

	// 设置清空图标
	.remark_input {
		line-height: 1;
	}
</style>
